<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-12 15:52:50
 * @LastEditors: your name
 * @LastEditTime: 2021-04-25 10:05:28
 * @Description: file content
-->
<template>
  <el-dialog
    :visible="showVisible"
    center
    :show-close="false"
    width="800px"
    custom-class="select-modal"
  >
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ title }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <div class="pl30 pr30">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-divider content-position="left">{{$t('sys.organizational_structure')}}</el-divider>
          <div class="select-modal__content">
            <el-tree
              ref="tree"
              :data="treeData"
              :expand-on-click-node="false"
              default-expand-all
              node-key="id"
              highlight-current
              :show-checkbox="showCheckbox"
              :check-strictly="true"
              @check-change="handleNodeCheck"
            >
              <span slot-scope="{ data }">
                <slot name="node" :data="data">
                  {{ data.name }}
                </slot>
              </span>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="12">
          <el-divider content-position="left">{{$t('sys.selected')}}</el-divider>
          <div class="select-modal__content">
            <div class="select-modal__checked-ul">
              <empty v-if="nodeCheckedData.length === 0"/>
              <div class="select-modal__checked-li" v-for="item in nodeCheckedData" :key="item.id">
                <div class="node-title">
                  <slot name="node" :data="item">
                    {{ item.name }}
                  </slot>
                </div>
                <div>
                  <span
                    v-if="item.id === nodeSelected"
                    class="node-desc"
                  >{{$t('sys.main_department')}}</span>
                  <span
                    v-else
                    class="node-desc node-select"
                    @click="handleNodeSelect(item.id)"
                  >{{$t('sys.set_main_department')}}</span>
                  <i class="el-icon-close" @click="handleNodeDelete(item)"></i>
                </div>
              </div>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>

    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">{{$t('sys.cancel')}}</el-button>
      <el-button type="primary" @click="submit">{{$t('sys.confirm')}}</el-button>
    </div>

  </el-dialog>
</template>

<script>
import Empty from '@/components/Empty'
import lodash from 'lodash'
export default {
  name: 'SelectOrgModal',
  components: {
    Empty
  },
  props: {
    title: {
      type: String,
      default: '选择'
    },
    treeData: {
      type: Array,
      default: () => []
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    autoClose: {
      type: Boolean,
      default: true
    }
  },

  data () {
    return {
      showVisible: false,
      nodeCheckedData: [],
      nodeSelected: ''
    }
  },

  methods: {
    open (data) {
      const nodeCheckedData = lodash.cloneDeep(data.nodeCheckedData)
      const checkedKeys = nodeCheckedData.map(item => item.id)
      this.showVisible = true
      this.$nextTick(() => {
        this.$refs.tree && this.$refs.tree.setCheckedKeys(checkedKeys)
        this.nodeSelected = data.nodeSelected
      })
    },

    close () {
      this.showVisible = close
    },

    handleNodeCheck (node, checked) {
      if (checked) {
        this.nodeCheckedData.push(node)
      } else {
        this.nodeCheckedData = this.nodeCheckedData.filter(ele => ele.id !== node.id)
      }
    },

    handleNodeSelect (id) {
      this.nodeSelected = id
    },

    handleNodeDelete (item) {
      this.nodeCheckedData = this.nodeCheckedData.filter(ele => ele.id !== item.id)
      const nodeCheckedKeys = this.nodeCheckedData.map(ele => ele.id)
      this.$refs.tree.setCheckedKeys(nodeCheckedKeys)
    },

    submit () {
      if (this.nodeCheckedData.length === 0) {
        this.$message.warning(this.$t('sys.select_department'))
        return
      }

      if (!this.nodeSelected || this.nodeCheckedData.findIndex(node => node.id === this.nodeSelected) < 0) {
        this.$message.warning(this.$t('sys.select_main_department'))
        return
      }

      this.autoClose && (this.showVisible = false)

      this.$emit('ok', {
        nodeCheckedData: lodash.cloneDeep(this.nodeCheckedData),
        nodeSelected: this.nodeSelected
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.select-modal{
  &__content{
    height: 40vh;
    overflow: auto;
  }

  &__checked-li{
    display: flex;
    align-items: center;
    height: 24px;
    justify-content: space-between;

    &:hover{
      .node-desc.node-select{
        display: inline;
      }
    }

    .node-title{
      width: 50%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .node-desc{
      font-size: 12px;
      margin-right: 10px;
      color: #999;
    }
    .node-desc.node-select{
      color: #1890ff;
      cursor: pointer;
      display: none;
    }

    i{
      margin-right: 10px;
      cursor: pointer;
      color: #1890ff;
      font-weight: bold;
    }
  }

  .el-checkbox{
    display: block;
    margin-right: 0;
    display: flex;
    align-items: center;
    height: 24px;
  }
}
</style>
<style lang="scss">
.select-modal{
  .el-dialog__body{
    padding-top: 0 !important;
  }
}
</style>
